<template>
  <div>
    <h2>条件判断指令</h2>
    <!--vue提供了两个条件判断指令,分别是v-show和v-if  -->
    <p v-show="flag">我通过v-show控制</p>
    <!-- 通过display:none隐藏 -->
    <p v-if="flag">我通过v-if控制</p>
    <!-- 直接移除 -->
    <!-- 如果一个元素,经常切换他的显示隐藏状态,用v-show会更好   -->
    <!-- 如果起始条件是false,v-show也会创建元素,创建后让元素display:none,所以v-show有更高的初始渲染代价 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
    };
  },
};
</script>

<style>
</style>